<template>
  <div class="encyclopedias-list">
    <div class="encyclopedias-list-wrap">
      <div class="encyclopedias-list-nav">
        <div class="encyclopedias-list-nav-title">
          <div class="encyclopedias-list-nav-title-icon" />
          <div class="encyclopedias-list-nav-title-text">
            热门项目
          </div>
        </div>
        <div class="encyclopedias-list-nav-wrap">
          <div
            v-for="item in encyclopediasTabOne"
            :key="item.class_id"
            class="encyclopedias-list-nav-item"
            :class="{active:active===item.class_name}"
            @click="tab(item)"
          >
            {{ item.class_name }}
          </div>
        </div>
      </div>
      <div class="encyclopedias-list-content">
        <div class="encyclopedias-list-content-recomm">
          <div class="encyclopedias-list-content-recomm-title">
            热门推荐
          </div>
          <div class="encyclopedias-list-content-recomm-item-wrap">
            <div
              v-for="item in recommData"
              :key="item.banner_id"
              class="encyclopedias-list-content-recomm-item"
            >
              <nuxt-link :to="`${item.detail.target}`">
                {{ item.detail.name }}
              </nuxt-link>
            </div>
          </div>
        </div>
        <div class="encyclopedias-list-content-item-wrap">
          <div
            v-for="item in encyclopediasTabTwo"
            :key="item.class_id"
            class="encyclopedias-list-content-item"
          >
            <div class="encyclopedias-list-content-item-title">
              {{ item.class_name }}
            </div>
            <div class="encyclopedias-list-content-item-content-wrap">
              <div v-for="i in item.project" :key="i.project_id" class="encyclopedias-list-content-item-content">
                <nuxt-link :to="`/wiki/${i.project_id}`">
                  {{ i.project_name }}
                </nuxt-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getEncyclopediasTabOne, getBanner, getEncyclopediasTabTwo } from '@/api/encyclopedias'
export default {
  components: {

  },
  async asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    const [encyclopediasTabOne, recommData] = await Promise.all([
      getEncyclopediasTabOne(1).then(res => {
        return res.data
      }),
      getBanner('science_hot').then(res => {
        return res.data
      })
    ])
    return {
      encyclopediasTabOne,
      recommData
    }
  },
  data() {
    return {
      active: '',
      classId: '',
      encyclopediasTabTwo: []
    }
  },
  computed: {

  },
  created() {
    this.active = this.encyclopediasTabOne[0].class_name
    this.classId = this.encyclopediasTabOne[0].class_id
    getEncyclopediasTabTwo(this.classId).then(res => {
      this.encyclopediasTabTwo = res.data
    })
  },
  mounted() {

  },
  methods: {
    tab(i) {
      this.active = i.class_name
      this.classId = i.class_id
      getEncyclopediasTabTwo(this.classId).then(res => {
        this.encyclopediasTabTwo = res.data
      })
    }
  },
  head() {
    return {
      title: `容猫百科  项目库  容猫(rongcat.com)`,
      meta: [
        { hid: 'description',
          name: 'description',
          content: '容猫百科，专业权威的医疗美容知识平台，汇聚正规医疗机构和权威专家，提供整形，微整形，美容，修复等领域的专业知识'
        }, {
          name: 'keywords', content: `整形 微整形 美容 热搜功效`
        }, {
          'http-equiv': 'mobile-agent', content: 'format=html5', url: `https://m.rongcat.com/wiki`
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.encyclopedias-list {
  width: 100%;
  background: rgba(246, 246, 246, 1);
  .encyclopedias-list-wrap {
    width: 1190px;
    margin: 0 auto;
    display: flex;
    padding-bottom: 20px;
  }
}
.encyclopedias-list-nav {
  flex: 1;
  margin-top: 30px;
  .encyclopedias-list-nav-title {
    display: flex;
    align-items: center;
    justify-content: center;
    .encyclopedias-list-nav-title-icon {
      width: 10px;
      height: 2px;
      background: rgba(80, 76, 255, 1);
    }
    .encyclopedias-list-nav-title-text {
      font-size: 14px;
      font-weight: 500;
      color: rgba(80, 76, 255, 1);
      line-height: 20px;
      margin-left: 8px;
    }
  }
  .encyclopedias-list-nav-wrap {
    width: 90px;
    margin-top: 12px;
    margin: 12px auto 0;
    .encyclopedias-list-nav-item {
      width: 90px;
      height: 29px;
      border-radius: 4px;
      text-align: center;
      margin-top: 8px;
      font-size: 14px;
      font-weight: 400;
      line-height: 29px;
      color: rgba(51, 51, 51, 1);
      line-height: 29px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .encyclopedias-list-nav-item:hover {
      cursor: pointer;
    }
    .active {
      color: #fff;
      background: #504cff;
    }
  }
}
.encyclopedias-list-content {
  width: 1015px;
  margin-left: 53px;
  margin-top: 30px;
  .encyclopedias-list-content-recomm {
    width: 100%;
    height: 96px;
    background: #fff;
    padding: 0 30px;
    .encyclopedias-list-content-recomm-title {
      width: 100%;
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid #f6f6f6;
      font-size:14px;
      font-family:PingFangSC-Semibold,PingFang SC;
      font-weight:600;
      color:rgba(51,51,51,1);
    }
    .encyclopedias-list-content-recomm-item-wrap {
      display: flex;
      .encyclopedias-list-content-recomm-item {
        font-size: 14px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        margin-right: 40px;
        line-height: 48px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .encyclopedias-list-content-recomm-item:hover {
        cursor: pointer;
      }
    }
  }
  .encyclopedias-list-content-item {
    width: 100%;
    margin-top: 10px;
    padding: 0 30px;
    background: #fff;
    .encyclopedias-list-content-item-title {
      width: 100%;
      height: 48px;
      font-size:14px;
      font-family:PingFangSC-Semibold,PingFang SC;
      font-weight:600;
      color:rgba(51,51,51,1);
      line-height:48px;
      border-bottom: 1px solid #f6f6f6;
    }
  }
  .encyclopedias-list-content-item-content-wrap{
    display: flex;
    flex-wrap: wrap;
    .encyclopedias-list-content-item-content{
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      margin-top: 14px;
      margin-bottom: 14px;
      margin-right: 24px;
      >a{
        color:rgba(102,102,102,1);
      }
    }
    .encyclopedias-list-content-item-content:hover{
      cursor: pointer;
    }
  }
}
</style>
